<template>
	<view class="content">
		<u-navbar back-icon-color="#FFFFFF" :back-text-style="backText" title-color="#FFFFFF" :background="barbg" :title="titleC">
			<view class="navbar-right" slot="right" @tap="gotoEdit">编辑</view>
		</u-navbar>
		<view class="video-box">
			<view class="front">
				<video :src="videoData.frontSrc" id="video" :show-mute-btn="true" :enable-play-gesture="true" :autoplay="isshow">
					<cover-view class="labelVideo">一号</cover-view>
				</video>
			</view>
			<view class="front">
				<video :src="videoData.backSrc" id="video" :show-mute-btn="true" :enable-play-gesture="true" :autoplay="isshow">
					<cover-view class="labelVideo">二号</cover-view>
				</video>
			</view>
		</view>
		<view class="info-box">
			<view class="title-box">挖掘机信息</view>
			<view class="info-wrap">
				<u-row gutter="0">
					<u-col span="6">
						<view class="info-left">车牌</view>
					</u-col>
					<u-col span="6">
						<view class="info-right">{{dataList.carNumber}}</view>
					</u-col>
				</u-row>
<!-- 				<u-line color="#efefef" />
				<u-row gutter="0">
					<u-col span="6">
						<view class="info-left">型号</view>
					</u-col>
					<u-col span="6">
						<view class="info-right">挖掘机</view>
					</u-col>
				</u-row> -->
				<u-line color="#efefef" />
				<!-- 				<u-row gutter="0">
					<u-col span="6">
						<view class="info-left" style="letter-spacing: 0px;">当前位置</view>
					</u-col>
					<u-col span="6">
						<view class="info-right">碧落天</view>
					</u-col>
				</u-row>
				<u-line color="#efefef" />
				<u-row gutter="0">
					<u-col span="6">
						<view class="info-left" style="letter-spacing: 8px;">作业点</view>
					</u-col>
					<u-col span="6">
						<view class="info-right">暂无</view>
					</u-col>
				</u-row> -->
				<u-line color="#efefef" />
				<u-row gutter="0">
					<u-col span="6">
						<view class="info-left" style="letter-spacing: 0px;">司机姓名</view>
					</u-col>
					<u-col span="6">
						<view class="info-right">{{dataList.driverName}}</view>
					</u-col>
				</u-row>
				<u-line color="#efefef" />
				<u-row gutter="0">
					<u-col span="6">
						<view class="info-left" style="letter-spacing: 0px;">联系电话</view>
					</u-col>
					<u-col span="6">
						<view class="info-right">{{dataList.driverPhone}}</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<!-- 		<view class="deleteBox">
			<u-button type="error" @tap="deleteCarTap">删除</u-button>
		</view> -->
	</view>
</template>

<script>
	import {
		readCar,
		deleteCar
	} from '@/api/car.js'
	export default {
		data() {
			return {
				barbg: {
					background: '#5c92ff'
				},
				backText: {
					color: '#FFFFFF'
				},
				dataList: [],
				videoData: {
					backSrc: "https://cmgw-vpc.lechange.com:8890/LCO/6H063ECPAZ86A4B/0/1/20201012T052016/dev_6H063ECPAZ86A4B_20201012T052016.m3u8?proto=https",
					frontSrc: "https://cmgw-vpc.lechange.com:8890/LCO/6H063ECPAZ86A4B/0/1/20201012T052016/dev_6H063ECPAZ86A4B_20201012T052016.m3u8?proto=https",
				},
				titleC: '',
				isshow: false,
			};
		},
		components: {},
		onLoad(option) {
			// console.log(option.type)
			if (option.type === '1') {
				this.titleC = "车辆详情"
			} else {
				this.titleC = "挖机详情"
			}
		},
		created() {
			// console.log(uni.getStorageSync('carID'))
			this.getCar(uni.getStorageSync('carID'))
			setTimeout(() =>{
				this.isshow = true
			} , 2000)
		},
		methods: {
			gotoEdit() {
				let {
					carNumber,
					type,
					driverName,
					driverPhone,
					id,
					frontCameraAddress,
					backCameraAddress,
				} = this.dataList
				let data = {
					carNumber,
					type,
					driverName,
					driverPhone,
					id,
					frontCameraAddress,
					backCameraAddress,
				}
				this.$urlTo.togo("./editCar/editCar" , data)
				// console.log(data);
			},
			addUser() {
				uni.navigateTo({
					url: './addUser/index'
				});
			},
			details() {
				uni.navigateTo({
					url: './details/index'
				});
			},
			deleteCarTap() {
				let id = uni.getStorageSync("carID")
				uni.showModal({
					title: '删除',
					content: '是否永久删除？',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							deleteCar(id).then(res => {
								console.log(res)
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
								if (res.code !== 1) {
									return
								} else {
									setTimeout(() => {
										var item = true; //item为要传的值
										var pages = getCurrentPages();
										var prevPage = pages[pages.length - 2];
										prevPage.delete = item;
										uni.navigateBack()
									}, 500)
								}

							})

						} else if (res.cancel) {
							// console.log('用户点击取消');
							uni.showToast({
								title: "取消删除",
								icon: "none"
							})
							return
						}
					}
				});
			},
			getCar(id) {
				readCar(id).then(res => {
					console.log(res.result)
					this.dataList = res.result;
					if (res.result.backCameraAddress !== null || res.result.frontCameraAddress !== null) {
						this.videoData.frontSrc = res.result.frontCameraAddress
						this.videoData.backSrc = res.result.backCameraAddress
					}
					// console.lo g(this.dataList)
				})
				this.$forceUpdate();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.navbar-right {
		padding: 0px 40rpx;
		color: #ffffff;
	}

	.video-box {
		background-color: #c8c7cc;
		height: 1000rpx;
		width: 750rpx;

		video {
			width: 750rpx;
			height: 500rpx;
		}

		.front {
			position: relative;
			z-index: 1;

			.labelVideo {
				position: absolute;
				top: 20rpx;
				right: 15rpx;
				width: 150rpx;
				height: 50rpx;
				text-align: center;
				line-height: 47rpx;
				color: white;
				background-color: rgba($color: #f3f3f3, $alpha: .3);
				opacity: .5;
				border-radius: 20rpx;
			}
		}
	}

	.info-box {
		background-color: #ffffff;
		padding: 30rpx;

		.title-box {
			font-size: 30rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 60rpx;
			letter-spacing: 0px;
			color: #5c92ff;
			font-weight: bold;
			position: relative;
			padding-left: 30rpx;
		}

		.title-box::before {
			content: '';
			position: absolute;
			width: 10rpx;
			height: 40rpx;
			background-color: #007aff;
			left: 0rpx;
			top: 10rpx;
		}

		.info-wrap {
			.info-left {
				font-size: 30rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 40rpx;
				letter-spacing: 60rpx;
				color: #2c3240;
				padding: 20rpx 0px;
			}

			.info-right {
				font-size: 30rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 40rpx;
				letter-spacing: 1rpx;
				color: #2c3240;
				text-align: right;
				font-weight: bold;
				padding: 20rpx 0px;
			}
		}
	}

	.deleteBox {
		background-color: white;
		padding: 30rpx 30rpx;
	}
</style>
